<template>
	<view>
		<titleAndTwoProduct
		:config="getTitleConfig"
		@click="click(getTitleConfig)">
			<view slot="content" class="products">
				<view class="product-item pre-hover" hover-class="hover" v-for="(item, index) in getProducts" :key="index" @tap.stop="click(item)">
					<image :src="item.img" mode="aspectFill" class="product-img"></image>
					<!-- <view class="product-name-box">
						<text class="product-name">{{item.name}}</text>
					</view> -->
					<view class="product-title">
						<text class="product-text price-weight" style="color: #F52F50;">￥{{Number(item.price)}}</text>
					</view>
				</view>
			</view>
		</titleAndTwoProduct>
	</view>
</template>

<script>
	import titleAndTwoProduct from '../titleAndTwoProduct/titleAndTwoProduct.vue';
	import QSSuperComponentCustomCompMixin from '../QSSuperComponentCustomCompMixin.js'
	export default {
		mixins: [QSSuperComponentCustomCompMixin({componentType:'bargainBuy-1'})],
		components: { 
			titleAndTwoProduct
		},
		props: {
			item: {
				type: Object,
				default: ()=>({})
			}
		},
		computed: {
			getProducts() {
				return (this.item.attributes.products || []).slice(0,2) || [];
			},
			getTitleConfig() {
				return this.item.attributes?.titleConfig || {}
			}
		},
	}
</script>

<style scoped>
	.products {
		display: flex;
		flex-direction: row;
	}
	
	.product-item {
		display: flex;
		flex-direction: column;
	}
	.product-item:not(:nth-child(1)) {
		margin-left: 15rpx;
	}
	
	.product-img {
		background-color: #F2F2F2;
		border-radius: 8rpx;
		margin-bottom: 20rpx;
		height: 160rpx;
		width: 160rpx;
	}
	
	.product-name-box{
		width: 160rpx;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		margin-bottom: 15rpx;
	}
	.product-name {
		font-size: 24rpx;
	}
	.product-title{
		display: flex;
		flex-direction: row;
	}
	
	.product-text{
		font-size: 30rpx;
	}
	
	.title-right{
		margin-left: 30rpx;
	}
</style>
